<template>
    <div style="border: 1px solid #ccc;">
        <Toolbar style="border-bottom: 1px solid #ccc;" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
        <Editor style="height: 400px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
            @onCreated="onCreated" @onChange="onChange"/>
    </div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
export default {
    name: 'wangeditor-page',
    components: {
        Editor,
        Toolbar
    },
    data() {
        return {
            editor: null,
            toolbarConfig: {  // 工具栏配置 : 如果是空对象，则默认展示所有.
                // toolbarKeys 重新配置工具栏，显示哪些菜单，以及菜单的排序、分组。
                toolbarKeys:['headerSelect','bold', 'underline','italic','color','bgColor','fontSize','fontFamily','lineHeight']
            },
            mode: 'default',  //  or 'simple'
            html: '',
            editorConfig: { placeholder: '请输入内容....' },
        }
    },
    methods:{
        // 生命周期，会自动执行不用手动调用
        onCreated(editor){
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        // 父组件中通过 ref 属性调用子组件中的方法，清除内容
        clean(){
            this.html = ''
        },
        // 监听输入的内容，发送给父组件 !!!
        onChange(){
            this.$emit('sendWangContent',this.html)
        }
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }

}
</script>
<style scoped></style> 